<template>
	<comp-navbar title="投影步骤" bgColor="#fff" :fixed="true" :z-index="999999" border></comp-navbar>
	<view class="step_wrap">
		<view class="title">演讲仪式</view>
		<!-- <view class="audio_wrap">

			<view class="title">演讲仪式</view>

			<up-slider v-model="slideval" block-color="blue" :vertical="true" height="6px"></up-slider>
		</view> -->
		<view class="step_content">
			<up-scroll-list :indicator="false" indicatorStyle="right">
				<up-steps :current="scence">
					<up-steps-item :title="item.label" v-for="(item,index) in scencolumns[0]"
						:key="index"></up-steps-item>
				</up-steps>
			</up-scroll-list>

			<view class="step_detail">
				<view class="step_item" v-if="stepInfo.Remarks">
					<view class="step_title">
						串场词
					</view>

					<view class="step_info">
						{{stepInfo.Remarks}}
					</view>

				</view>
			</view>
		</view>

		<view class="step_footer ">
			<view class="copy_wrap flex" v-if="copyLink.length">
				<view class="text">
					投影播放链接：
				</view>
				<view class="link">
					{{copyLink}}
				</view>
				<image src="/static/img/copy.png" class="copy_img" @click="handleCopy"></image>
			</view>
			<view class="flex_betweent">
				<view class="footer_l flex">
					<!-- <view class="iconfont icon-yinliang" @click="relOpen"></view> -->
					<view class="iconfont icon-caidan" @click="handlescen"></view>
					<view :class="['btn',scentype=='prev' ? 'act':'']" @click="handlescenswitch('prev')"
						hover-class="act">上一个场景</view>
					<view :class="['btn',scentype=='next' ? 'act':'']" @click="handlescenswitch('next')"
						hover-class="act">下一个场景</view>
				</view>
				<view class="footer_r">
					<view class="btn" @click="handleclosescence">结束投影</view>
				</view>
			</view>

		</view>
	</view>

	<comp-picker :show="scenshow" :columns="scencolumns" @cancel="scenshow=false" @confirm="handle_confirm"
		keyName="label" :defaultIndex="[scenindex]"></comp-picker>

	<!-- 音量弹窗 -->
	<up-popup :show="relShow" @close="relClose" mode="center" overlayOpacity="0.8" bgColor="transparent"
		:overlayStyle="{backdropFilter:'blur(10px)'}">
		<view class="rel_wrap">
			<comp-navbar title="音量信息" bgColor="transparent" :fixed="false" @back="relClose"
				:custom="true"></comp-navbar>
			<!-- <view class="title">音量控制</view> -->
			<up-slider v-model="slideval" block-color="blue" height="6rpx" showValue></up-slider>
			<view class="btn" @click="sliderconfirm">确定</view>
		</view>
	</up-popup>

	<!-- 确认切换 -->
	<up-modal :show="show" title="提示" :content='content' :showCancelButton="true" @confirm="scenconfirm"
		@cancel="scencancel"></up-modal>
</template>

<script setup>
	import {
		nextTick,
		onMounted,
		ref
	} from 'vue';
	import {
		request,
		webBaseUrl
	} from '@/utils/request.js'
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const ysid = ref('')
	const zid = ref('')
	const copyLink = ref('')
	const setTempletefn = async (cid, tid, zid) => {
		if (!tid) return false;
		const res = await request({
			method: 'GET',
			url: '/SZ_CeremonyTemplate/SetTemplateID',
			data: {
				ChannelExhibitionHallID: zid,
				CeremonyOrdersID: cid,
				TemplateID: tid
			}
		})
		return true
	}

	// 生成投影地址
	const generatateUrl = (zid, cid, tid) => {
		// copyLink.value = `${webBaseUrl}/#/?zid=${zid}&cid=${cid}&tid=${tid}`
		// copyLink.value = `${webBaseUrl}/#/?zid=${zid}`;
		const hostname = window.location.host;
		copyLink.value = `http://110.40.142.133:8080/#/preview/ceremony/service/${cid}`;
	}

	const handleCopy = () => {
		uni.setClipboardData({
			data: copyLink.value,
			success: function() {
				uni.$u.toast('复制成功');
			}
		});
	}

	const scence_content = ref('')
	const flag = ref(1) // 1切换场景  2 结束投影

	// 场景切换
	const scence = ref(0)
	const stepInfo = ref('')
	const scenshow = ref(false);
	const scencolumns = ref([
		[{
			label: '追思',
			id: 1
		}, {
			label: '祭拜',
			id: 2
		}, {
			label: '思念',
			id: 3
		}]
	]);
	const scenvalue = ref('') // scencolumns.value[0][0].label
	const scenindex = ref(0)
	const handlescen = () => {
		scenshow.value = true
	}
	const handle_confirm = ({
		index,
		value
	}) => {
		scenshow.value = false
		scenindex.value = index;
		scenvalue.value = value[0].label
		scence.value = index;
		stepInfo.value = scencolumns.value[0][index]
		const tid = scencolumns.value[0][index].ID
		//console.log('切换', scencolumns.value[0][index])
		setTempletefn(ysid.value, tid, zid.value)
		generatateUrl(zid.value, ysid.value, tid)
	}

	// 切换场景
	const scentype = ref('')
	const show = ref(false)
	const content = ref('确认切换到下一个场景吗？')

	const swicthContentFn = async () => {
		if (scence.value <= 0) {
			scence.value = 0;
		}

		if (scentype.value == 'prev') {
			scence.value--;

		}
		if (scentype.value == 'next') {
			scence.value++;

		}

		await nextTick()
		if (scence.value >= scencolumns.value[0].length) {
			show.value = false;
			return;
		}
		stepInfo.value = scencolumns.value[0][scence.value]
		const tid = scencolumns.value[0][scence.value]?.ID
		show.value = false;
		//console.log('scence.value', scence.value, stepInfo.value)

		setTempletefn(ysid.value, tid, zid.value)
		generatateUrl(zid.value, ysid.value, tid)

	}

	const handlescenswitch = async (type) => {

		if (type == 'prev') {
			if (scence.value == 0) {
				uni.$u.toast('没有上个场景啦')
				return
			}
			//content.value = '确认切换到上一个场景吗'
		}
		if (type == 'next') {
			if (scence.value >= scencolumns.value[0].length - 1) {
				uni.$u.toast('已经是最后一个场景')
				console.log('scence.value', scence.value, scencolumns.value)
				return;
			}
			//content.value = '确认切换到下一个场景吗'
		}
		//show.value = true;
		scentype.value = type;
		flag.value = 1

		swicthContentFn()
	}



	// 确认弹窗
	const scenconfirm = async () => {
		if (flag.value == 2) {
			confirmOver(stepInfo.value.CeremonyOrdersID)
			return;
		}

	}
	const scencancel = () => {
		show.value = false;
	}

	const handleclosescence = () => {
		show.value = true;
		scentype.value = 'close'
		content.value = '确认结束投影吗'
		flag.value = 2
	}



	// 音量
	const relShow = ref(false);
	const relClose = () => {
		relShow.value = false
	};

	const relOpen = () => {
		relShow.value = true
	}
	// 响应式数据
	const slideval = ref(30);
	const sliderChange = () => {

	}
	const sliderconfirm = () => {
		relShow.value = false
		console.log('音量', slideval.value)
	}

	onLoad((opt) => {
		const {
			id,
			tid,
			zids
		} = opt;
		getExhibitionhall(id)
		generatateUrl(zids, id, tid)
		ysid.value = id
		zid.value = zids
	})

	const getExhibitionhall = async (id) => {
		try {

			const res = await request({
				method: 'GET',
				url: '/SZ_CeremonyTemplate/GetCeremonyTemplateList',
				data: {
					ID: id
				}
			})
			console.log('getExhibitionhall', res)
			const newData = res.Data.map(v => {
				return {
					...v,
					label: v.ProcessName
				}
			})

			scencolumns.value = [newData]
			scenvalue.value = newData[scence.value].ProcessName
			getTemplate(newData[scence.value].ID)

			console.log('scence', scence.value)
			//list.value = res.Data
		} catch (e) {
			//TODO handle the exception
		}
	}


	// 流程详情
	const getTemplate = async (id) => {

		const res = await request({
			url: '/SZ_CeremonyTemplate/GetCeremonyTemplateID',
			method: 'GET',
			data: {
				ID: id
			}
		})
		stepInfo.value = res.Data[0]
		console.log('getTemplate', res)

	}
	// 结束投影
	const confirmOver = async (id) => {
		const flag = await setTempletefn(ysid.value, -2, zid.value);
		if (!flag) return;
		uni.$u.toast('结束投影');
		uni.switchTab({
			url: '/pages/yishi/yishi'
		})
		// const res = await request({
		// 	method: 'GET',
		// 	url: '/SZ_ChannelExhibitionHall/UpdateCeremonyOrders',
		// 	data: {
		// 		ID: id
		// 	}
		// })

		// if (res.Status) {
		// 	uni.$u.toast('结束投影')
		// 	uni.switchTab({
		// 		url: '/pages/yishi/yishi'
		// 	})
		// } else {
		// 	uni.$u.toast(res.Message)
		// }
	}
</script>

<style lang="scss">
	.step_wrap {
		padding: 120rpx 20rpx 0 20rpx;

		.title {
			padding: 40rpx;
			font-weight: bold;
			font-size: 38rpx;
			text-align: center;
		}

		.step_content {
			padding: 0 0 60rpx 0;

			.step_detail {
				max-height: 400rpx;
				word-break: break-all;
				overflow-y: auto;
				padding: 80rpx 0 0 0;

				.step_item {
					font-size: 30rpx;

					.step_title {
						position: relative;
						padding: 0 0 20rpx 10rpx;
						font-size: 32rpx;

						&::before {
							position: absolute;
							left: 0;
							top: 2rpx;
							content: "";
							width: 6rpx;
							height: 34rpx;
							background-color: $act-color;
						}
					}

					.step_info {
						color: $base-color;
					}
				}
			}
		}

		.step_footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;

			.footer_l {
				.btn {
					margin-right: 20rpx;
				}

				.iconfont {
					font-size: 40rpx;
					margin-right: 20rpx;
				}
			}

			.footer_r {
				.btn {
					background-color: #d14343;
				}
			}

			.btn {
				width: 200rpx;
				height: 80rpx;
				margin: 40rpx auto;
				line-height: 80rpx;
				font-size: 28rpx;
				text-align: center;
				color: #fff;
				background-color: rgba(98, 106, 195, 0.5);
				border-radius: 4rpx;

				&.act {
					background-color: $act-color;
				}

			}
		}
	}

	.rel_wrap {
		width: 90vw;
		height: 340rpx;
		padding: 40rpx 0 0 0;
		box-sizing: border-box;
		background-color: #fff;

		.title {
			text-align: center;
			padding: 20rpx 0;
			font-size: 40rpx;
		}

		.btn {
			width: 200rpx;
			height: 80rpx;
			margin: 20rpx auto;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			color: #fff;
			background-color: $act-color;
			border-radius: 4rpx;
		}
	}

	.copy_wrap {
		padding: 20rpx 0;
		align-items: center;

		.copy_img {
			margin-left: auto;
			width: 40rpx;
			height: 40rpx;
		}

		.link {
			flex: 1;
			color: blue;
			word-break: break-all;
		}
	}
</style>